<template>
  <div class="module">
    <div class="bar-wrap">
      <div class="bar-bg">
        <svg-icon icon-class="bar-bg"></svg-icon>
        <div class="bar-mark-wrap">
          <div class="bar-mark" v-for="n in 11" :key="n" :style="{ left: `${10 * (n - 1)}%` }">
            <svg-icon icon-class="bar-mark"></svg-icon>
          </div>
          <div class="bar-point" :style="{ left: `${progress}%` }" :data-title="`${progress}%`">
            <svg-icon icon-class="bar-point"></svg-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="stage-wrap">
      <div class="icons-wrap">
        <div class="svg-wrap">
          <svg-icon icon-class="running"></svg-icon>
        </div>
        <span class="running">进行中</span>
        <div class="svg-wrap">
          <svg-icon icon-class="stop"></svg-icon>
        </div>
        <span class="stop">暂停</span>
        <div class="svg-wrap">
          <svg-icon icon-class="incomplete"></svg-icon>
        </div>
        <span class="incomplete">未完成</span>
        <div class="svg-wrap">
          <svg-icon icon-class="completed"></svg-icon>
        </div>
        <span class="completed">已完成</span>
        <div class="svg-wrap">
          <svg-icon icon-class="failed"></svg-icon>
        </div>
        <span class="failed">失败</span>
      </div>
      <div
        class="stage-item"
        v-for="item in list"
        :key="item.modelNodeId"
        :style="{ width: list.length ? `${100 / list.length}%` : 'auto' }"
      >
        <div class="stage-title">{{item.nodeName}}</div>
        <div class="node-wrap scrollbar">
          <transition-group name="flip-list" tag="div">
            <div class="node-item" v-for="node in item.children" :key="node.nodeRemark">
              <node-comp :data="node"></node-comp>
            </div>
          </transition-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { stageList, stageId } from "@/api/api-mock";
import NodeComp from "@/components/NodeComp.vue";
let timer;
export default {
  components: { NodeComp },
  data() {
    return {
      list: []
    };
  },
  computed: {
    progress() {
      if (this.list.length === 0) return 0
      return parseInt(this.list.reduce((a, b) => {
        return a + b.childPercent
      }, 0) / this.list.length)
    }
  },
  methods: {
    getData() {
      return stageList().then(res => {
        if (res.success) {
          this.list = res.obj.screenNodeList.map(t => ({
            ...t,
            childPercent: 0,
            children: []
          }));
          console.log(this.list);
        }
      });
    },
    getNodeData() {
      this.list.forEach(item => {
        stageId(item.modelNodeId).then(res1 => {
          if (res1.success) {
            item.childPercent = res1.obj.percent;
            const running = res1.obj.screenNodeShows.filter(t => t.nodeState == "4");
            const stop = res1.obj.screenNodeShows.filter(t => t.nodeState == "2");
            const incomplete = res1.obj.screenNodeShows.filter(t => t.nodeState == "1");
            const completed = res1.obj.screenNodeShows.filter(t => t.nodeState == "0");
            const failed = res1.obj.screenNodeShows.filter(t => t.nodeState == "3");
            item.children = [...running, ...stop, ...incomplete, ...completed, ...failed];
          }
        });
      });
    }
  },
  mounted() {
    this.getData().then(this.getNodeData);
    timer = setInterval(this.getNodeData, 1000 * 10)
  },
  beforeDestroy() {
    if (timer) {
      clearInterval(timer)
    }
  }
};
</script>
<style lang="less" scoped>
.flip-list-move {
  transition: transform 1s;
}

.module {
  width: 100%;
  height: 100%;
  .bar-wrap {
    height: 75px;
    position: relative;
    .bar-bg{
      position: absolute;
      left: 0;
      top: 36px;
      height: 2.3px;
      width: 100%;
      .bar-mark-wrap{
        width: 1166px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        .bar-mark{
          position: absolute;
          width: 9px;
          height: 9px;
          top: -5px;
          left: 0;
          transform: translateX(-4.5px);
        }
        .bar-point{
          transition: left 1s ease-out;
          width: 30px;
          height: 30px;
          position: absolute;
          top: -20px;
          transform: translateX(-15px);
          z-index: 10;
          &::after {
            font-size: 13px;
            position: absolute;
            content: attr(data-title);
            left: 0;
            right: 0;
            top: -15px;
            color: #fff;
            overflow: hidden;
          }
        }
      }
    }
  }
  .stage-wrap {
    display: flex;
    justify-content: space-around;
    position: relative;
    .stage-item {
      flex: 1;
      .stage-title {
        font-size: 13.82px;
        color: #fff;
        line-height: 30px;
      }
      .node-wrap {
        height: 154px;
        overflow-y: auto;
        .node-item {
          padding: 6px 30px;
          position: relative;
          &::after {
            content: " ";
            position: absolute;
            border-left: 1px dashed rgba(255, 255, 255, 0.3);
            left: 34px;
            top: 0;
            height: 100%;
          }
        }
      }
    }
    .icons-wrap{
      position: absolute;
      left: 20px;
      top: -14px;
      font-size: 10px;
      display: flex;
      align-items: center;
      .svg-wrap{
        width: 10px;
        height: 10px;
        margin: 0 5px 0 10px;
        /deep/ .svg-icon{
          vertical-align: top;
        }
      }
      span{
        margin-right: 10px;
        &.running{
          color: rgb(242, 191, 69);
        }
        &.stop{
          color: rgb(71, 230, 251);
        }
        &.incomplete{
          color: rgb(119, 135, 163);
        } 
        &.completed{
          color: rgb(50, 216, 140);
        }
        &.failed{
          color: rgb(255, 66, 42);
        }
      }
    }
  }
}
</style>
